
<template>
  <div>
    <van-uploader
        v-bind="$attrs"
        :after-read="afterRead"
        :before-delete="deleteFile"
        upload-icon="add"
    />
<!--      <van-button icon="plus" type="primary">上传文件</van-button>-->
<!--    </van-uploader>-->
  </div>
</template>

<script setup name="cascader">
import {uploadsFile} from "@/api/provinceCity.js"
const props = defineProps({
  /**
   * 文件集合
   */
  modelValue: {
    type: Array,
    default: () => [],
  }
});
const fileList = ref([]);
const valFileList = ref([]);
const emit = defineEmits(["update:modelValue"]);
watch(
    () => props.modelValue,
    (newVal) => {
      const filePaths = fileList.value.map((file) => file.url);
      const fileNames = fileList.value.map((file) => file.name);
      // 监听modelValue文件集合值未变化时，跳过赋值
      if (
          filePaths.length > 0 &&
          filePaths.length === newVal.length &&
          filePaths.every((x) => newVal.some((y) => y.url === x)) &&
          newVal.every((y) => filePaths.some((x) => x === y.url)) &&
          fileNames.every((x) => newVal.some((y) => y.name === x)) &&
          newVal.every((y) => fileNames.some((x) => x === y.name))
      ) {
        return;
      }

      if (newVal.length <= 0) {
        fileList.value = [];
        valFileList.value = [];
        return;
      }

      fileList.value = newVal.map((file) => {
        return { name: file.name, ...file };
      });

      valFileList.value = newVal.map((file) => {
        return { name: file.name, ...file };
      });
    },
    { immediate: true }
);


</script>
<style lang="less">
</style>